<template>
  <div class="z-calendar">
    <!-- <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions">
      <template v-slot:page-tabs>
        <tabs />
      </template>
    </page-list> -->
    <tabs :tab-list="tabList" />
    <div class="z-calendar-header">
      <div class="z-calendar__header-top">
        <el-input v-model="title" placeholder="输入直播课名称" size="mini" />
        <el-input v-model="teacher" placeholder="请输入讲师名称" size="mini" />
        <el-button plain size="mini" @click="onSearch">筛选</el-button>
      </div>
      <div class="z-calendar__header-bottom">
        <div class="z-calendar__button-group">
          <el-button-group>
            <el-button v-for="(item, index) in btnList" :key="index" :type="btnType == item.key ? 'primary' : ''" size="mini" @click="selectTable(item.key)">
              {{ item.value }}
            </el-button>
          </el-button-group>
        </div>
        <div class="z-calendar__button">
          <el-button plain size="mini" icon="el-icon-arrow-left" @click="selectDate('prev')" />
          <div class="z-calendar__title">
            <template v-if="btnType == 'week'">
              {{ curWeekDatePrefix }}
            </template>
            <template v-else-if="btnType == 'month'">
              {{ curMonthDatePrefix }}
            </template>
            <template v-else>
              {{ curDayDatePrefix }}
            </template>
          </div>
          <el-button plain size="mini" icon="el-icon-arrow-right" @click="selectDate('next')" />
        </div>
        <el-link type="primary" :underline="false" @click="selectDate('today')">今{{ curTodaySuffix }}</el-link>
        <div class="z-calendar__num">
          共
          <span>{{ count }}</span>
          节课
        </div>
      </div>
    </div>
    <div class="z-calendar-body">
      <template v-if="btnType == 'day'">
        <calendar-day ref="calendarDay" v-model="dayValue" :title="title" :teacher="teacher" @number="changeNumber" />
      </template>
      <calendar-week v-else-if="btnType == 'week'" ref="calendarWeek" v-model="weekValue" :title="title" :teacher="teacher" @number="changeNumber" />
      <calendar-month v-else ref="calendarMonth" v-model="monthValue" :title="title" :teacher="teacher" @number="changeNumber" />
    </div>
  </div>
</template>

<script>
// import PageList from '@public/template/page_list.vue';
import Tabs from '../components/tabs.vue';
import calendarDay from './components/calendar-day.vue';
import calendarWeek from './components/calendar-week.vue';
import calendarMonth from './components/calendar-month.vue';
import { mapGetters } from 'vuex';
import { parseTime } from '@/common/js/filters.js';
export default {
  components: {
    // PageList,
    Tabs,
    calendarDay,
    calendarWeek,
    calendarMonth
  },
  data() {
    return {
      tabList: [
        {
          type: '1',
          url: '/my/study/table',
          title: '直播课表'
        }
      ],
      btnList: [
        {
          key: 'day',
          value: '日'
        },
        {
          key: 'week',
          value: '周'
        },
        {
          key: 'month',
          value: '月'
        }
      ],
      btnType: 'day',
      dayValue: new Date(),
      weekValue: new Date(),
      monthValue: new Date(),
      title: '',
      teacher: '',
      count: 0
    };
  },
  computed: {
    ...mapGetters({
      globThemeColor: 'projectSetting/getGlobThemeColor'
    }),
    curTodaySuffix() {
      return this.btnList.find(item => item.key == this.btnType).value;
    },
    curDayDatePrefix() {
      return parseTime(this.dayValue, '{y}年{m}月{d}日');
    },
    curWeekDatePrefix() {
      /**
       * 获取当前周的开始日期
       */
      const getStartDateOfWeek = () => {
        const date = this.toDate(this.weekValue);
        const firstDay = date.getDay();
        const diff = (7 + firstDay) % 7;
        date.setDate(date.getDate() - diff);
        return date;
      };
      /**
       * 获取当前周的结束日期
       * 星期天为 0
       * 星期一到星期六分别用 1-6 表示
       */
      const getEndDateOfWeek = () => {
        const date = this.toDate(this.weekValue);
        const firstDay = date.getDay();
        const diff = (6 - firstDay) % 7;
        date.setDate(date.getDate() + diff);
        return date;
      };
      // 年相等不显示
      if (getStartDateOfWeek().getFullYear() == getEndDateOfWeek().getFullYear()) {
        return `${parseTime(getStartDateOfWeek(), '{y}年{m}月{d}日')} - ${parseTime(getEndDateOfWeek(), '{m}月{d}日')}`;
      } else {
        return `${parseTime(getStartDateOfWeek(), '{y}年{m}月{d}日')} - ${parseTime(getEndDateOfWeek(), '{y}年{m}月{d}日')}`;
      }
    },
    curMonthDatePrefix() {
      return parseTime(this.monthValue, '{y}年{m}月');
    }
  },
  methods: {
    selectDate(type) {
      if (this.btnType == 'day') {
        this.$refs.calendarDay.selectDate(type);
      } else if (this.btnType == 'week') {
        this.$refs.calendarWeek.selectDate(type);
      } else {
        this.$refs.calendarMonth.selectDate(type);
      }
    },
    onSearch() {
      if (this.btnType == 'day') {
        this.$refs.calendarDay.onSearch();
      } else if (this.btnType == 'week') {
        this.$refs.calendarWeek.onSearch();
      } else {
        this.$refs.calendarMonth.onSearch();
      }
    },
    selectTable(type) {
      if (type == this.btnType) return;
      this.btnType = type;
    },
    toDate(val) {
      if (!val) {
        throw new Error('invalid val');
      }
      return val instanceof Date ? val : new Date(val);
    },
    changeNumber(val) {
      this.count = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.z-calendar-header {
  .z-calendar__header-top {
    display: flex;
    margin-left: 20px;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .z-calendar__header-bottom {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .z-calendar__button-group {
    margin-right: 30px;
  }
  .z-calendar__button {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
  .z-calendar__title {
    min-width: 176px;
    margin: 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: #5191ff;
    text-align: center;
  }
  .z-calendar__num {
    margin-left: 5%;
    font-size: 14px;
    font-weight: 400;
    color: #909399;
    span {
      color: #303133;
      font-weight: bold;
    }
  }
}
.z-calendar-body {
  margin-top: 30px;
  height: 100%;
}
</style>
